<template>
    <div style="padding: 16px;">
        <div style="display: flex; justify-content: space-between; font-size: 18px; border-bottom: 1px solid #ddd;padding-bottom: 5px;">
            <span @click="router.go(-1)" style="font-weight: 600;">&lt;</span>
            <span style="font-weight: 600;">发布详情</span>
            <span></span>
        </div>
        <div style="position: relative;">
            <p style="margin: 15px 0 5px;">需求说明</p>
            <textarea v-model="textareaValue" placeholder="请输入您的招工信息（例如：武汉住宅装修急需木工师傅一位，100字以内）" maxlength=100 style="border: 0; background-color: rgb(249,249,249); width: 100%; height: 150px; padding: 10px; box-sizing: border-box; outline: none;"></textarea>
            <span style="position: absolute; right: 10px; bottom: 10px;">{{ textareaValue.length }} / 100</span>
        </div>
        <div>
            <p style="margin: 15px 0 5px;">工作地点：</p>
            <div @click="router.push('/map')" style="border-bottom: 1px solid #ddd; display: flex;padding-bottom: 5px;">
                <div :style="`flex-grow: 1;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;color: ${adr?'#000':'gray'};`">{{ adr?adr:'请选择地址' }}</div>
                <span style="color: #aaa;">&gt;</span>
            </div>
        </div>
        <div>
            <p style="margin: 15px 0 5px;">详细地址：</p>
            <input placeholder="请输入详细地址" v-model="xxdz" style="width: 100%;height: 23px;box-sizing: border-box; border: 0;outline: none;border-bottom: 1px solid #ddd; padding-bottom: 5px;" />
        </div>
        <div>
            <p style="margin: 15px 0 5px;">所需工种：</p>
            <div @click="flag=false" style="border-bottom: 1px solid #ddd; display: flex;padding-bottom: 5px;">
                <div style="flex-grow: 1;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
                    <span v-for="(i, idx) in xzinput" :key="i.id">
                        <span v-if="idx!==0"> / </span>
                        <span>{{ i.name }}</span>
                        <span v-if="xzinput.length===1" style="color: #aaa;"> ({{ gzlist.filter(j => j.name===i.name)[0].text }})</span>
                    </span>
                    <span v-if="xzinput.length===0" style="color: gray;">请选择工种</span>
                </div>
                <span style="color: #aaa;">&gt;</span>
            </div>
        </div>
        <div style="border-bottom: 1px solid #ddd;margin: 15px 0 5px; display: flex;justify-content: space-between;padding-bottom: 5px;">
            <span>预计薪资：</span>
            <span>
                <input v-model="price" maxlength="10" placeholder="输入预计薪资" style="border: 0; outline: none; text-align: right;" /> 元
            </span>
        </div>
        <div style="border-bottom: 1px solid #ddd;margin: 15px 0 5px; display: flex;justify-content: space-between;padding-bottom: 5px;">
            <span>联系人：</span>
            <span>
                <input v-model="lxr" maxlength="10" placeholder="输入联系人" style="border: 0; outline: none; text-align: right;" />
            </span>
        </div>
        <div style="border-bottom: 1px solid #ddd;margin: 15px 0 5px; display: flex;justify-content: space-between;padding-bottom: 5px;">
            <span>联系电话：</span>
            <span>
                <input v-model="lxdh" maxlength="11" placeholder="输入联系电话" style="border: 0; outline: none; text-align: right;" />
            </span>
        </div>
        <div>
            <p style="margin: 15px 0 5px;">上传项目资料（不可修改）：</p>
            <div v-if="previewImages.length!==0" style="display: flex;flex-wrap: wrap; gap: 10px 10px; margin-top: 20px;">
                <div v-for="(i, idx) in previewImages" :key="i" style="width: 82px; height: 82px; overflow: hidden; display: flex;justify-content: center; align-items: center; position: relative;">
                    <img style="height: 100%;" :src="i" />
                    <!-- <span @click="deleteimg(idx)" style="position: absolute; display: flex; justify-content: center; align-items: center; width: 15px; height: 15px; right: 0; top: 0;background-color: rgba(0,0,0,.3);color: #fff;">×</span> -->
                </div>
                <!-- <label for="scinput" style="width: 82px; height: 82px; box-sizing: border-box; display: flex; justify-content: center; align-items: center;font-size: 30px; background-color: rgb(249,249,249);">+</label>
                <input id="scinput" style="display: none;" type="file" multiple @change="handleFileUpload" /> -->
            </div>
            <label v-if="!previewImages.length" for="scinput" style="width: 82px; height: 82px; box-sizing: border-box; display: flex; justify-content: center; align-items: center;font-size: 30px; background-color: rgb(249,249,249);margin-top: 20px;">+</label>
            <input v-if="!previewImages.length" id="scinput" style="display: none;" type="file" multiple @change="handleFileUpload" />
        </div>
        <div style="display: flex;justify-content: space-between;">
            <div @click="gb" style="text-align: center;margin-top: 20px;padding: 10px;background-color: rgb(242, 242, 242); color: #000;border-radius: 5px; font-weight: 700; width: 48%; box-sizing: border-box;">{{ isal==='1'?'关闭':'已关闭' }}</div>
            <div @click="xg" style="text-align: center;margin-top: 20px;padding: 10px;background-color: blue; color: #fff;border-radius: 5px; font-weight: 700; width: 48%; box-sizing: border-box;">修改</div>
        </div>
        <div :style="`position: fixed; left: 0; top: 0; height: 100vh; width: 100vw; display: ${ flag?'none':'flex' }; background-color: rgba(0,0,0,.3); flex-direction: column; justify-content: space-between; z-index: 2`">
            <div></div>
            <div style="background-color: #fff;max-height: 35vh; overflow: auto;">
                <div style="display: flex;justify-content: space-between;padding: 16px;position: sticky;top: 0;background-color: #fff;">
                    <span style="width: 26px;"></span>
                    <span>选择工种（可多选）</span>
                    <span @click="flag=true" style="color: blue">完成</span>
                </div>
                <div v-for="i in gzlist" :key="i.id" style="display: flex;">
                    <div style="width: 50px; display: flex;justify-content: center;align-items: center;">
                        <input :value="JSON.stringify(i)" :checked="JSON.stringify(xzinput).includes(JSON.stringify(i))" type="checkbox" @change="editinput" />
                    </div>
                    <div style="margin: 10px 0;">
                        <div :style="`color: ${xzinput.filter(j => j===i.name).length===1?'blue':''};`">{{i.name}}</div>
                        <div :style="`color: ${xzinput.filter(j => j===i.name).length===1?'blue':'#999'};`">{{i.text}}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
    import { useStore } from '../store';
    import { useRoute, useRouter } from "vue-router";
    import { computed, onBeforeMount, ref } from 'vue';
    import axios from 'axios';
    import dayjs from 'dayjs';
    axios.defaults.baseURL='http://127.0.0.1:3000'

    let router = useRouter()
    let route = useRoute()
    const id = computed(() => route.params.id as string);
    let a=useStore()
    let textareaValue = ref('')
    let xxdz = ref('')
    let lxr = ref('')
    let lxdh = ref('')
    let price = ref('')
    let flag = ref(true)
    let even:any = ref(null);
    // let imgurls = ref([]);
    let xzinput:any = ref([])
    let adr = ref(a.address)
    let isal = ref('')
    const previewImages:any = ref([]);
    let gzlist = ref([
        { id: 1, name: '泥瓦工', text: '泥工/瓦工/抹灰/砌砖/贴砖/砸墙/美缝' },
        { id: 2, name: '木工', text: '木地板/木门/吊柜/衣柜/橱柜/铝扣板顶/铝塑板顶/石膏板顶' },
        { id: 3, name: '水电工', text: '水管道安装/改造/暖气安装/拆除/线路设计/铺设/安装' },
        { id: 4, name: '油漆工', text: '刮腻子/刷油漆/贴壁纸/壁布' },
        { id: 5, name: '拆旧工', text: '格局改动/二手房旧家具和墙地砖拆除' },
    ])
    const handleFileUpload = (event:any) => {
        even.value=[]
        const files = event.target.files;
        if (files && files.length > 0) {
            previewImages.value = [...previewImages.value];
            for (let i = 0; i < files.length; i++) {
                const file = files[i];
                even.value.push(file)
                const reader = new FileReader();
                reader.onload = (e:any) => {
                    previewImages.value.push(e.target.result);
                };
                reader.readAsDataURL(file);
            }
        } else {
            previewImages.value = [];
        }
    };
    let gb = () => {
        axios.post('/editflag', {id: id.value}).then(i => {
            if(i.data.code === 200){
                getList()
            }
        })
    }
    let xg = () => {
        // const files = even.value;
        // let aaa:any = []
        // if(files.length > 0){
        //     const formData = new FormData();
        //     for (let i = 0; i < files.length; i++) {
        //         formData.append('files[]', files[i]);
        //     }
        //     axios.post('/api/upload', formData, {
        //         headers: {
        //             'Content-Type': 'multipart/form-data'
        //         }
        //     }).then(i => {
        //         if(i.data.code === 200){
        //             imgurls.value = i.data.imglist
        //             aaa = i.data.imglist
        //         }
        //     })
        // }
        axios.post('/editrelease', {
            id: id.value,
            name: lxr.value,
            city: a.address,
            address: xxdz.value,
            tel: lxdh.value,
            salary: price.value,
            job: xzinput.value,
            text: textareaValue.value,
            // imgs: aaa,
            img: '',
            datetime: String(dayjs().format('YYYY-MM-DD HH:mm:ss')),
            // isFlag: '1'
        }).then(j => {
            if(j.data.code === 200){
                router.push('/myrelease')
            }
        })
    }
    let editinput = (a:any) => {
        console.log(a, 'a')
        let c:object = JSON.parse(a.target.value)
        console.log(c, 'c')
        let b:any[] = [...xzinput.value]
        console.log(b[0].name, 'b')
        let idx = b.findIndex(i => i.name==(c as any).name)
        console.log(idx)
        if(idx!==-1){
            b.splice(idx,1)
        }else{
            b.push((c as any))
        }
        xzinput.value=b
    }
    // let deleteimg = (idx:any) => {
    //     even.value.splice(idx,1)
    //     previewImages.value.splice(idx, 1)
    // }
    let getList = () => {
        axios.post('/getreleaseone', {id:id.value}).then(i => {
            if(i.data.code === 200){
                textareaValue.value=i.data.data.text
                adr.value=i.data.data.city
                xxdz.value=i.data.data.address
                xzinput.value=i.data.data.job
                price.value = i.data.data.salary
                lxr.value=i.data.data.name
                lxdh.value=i.data.data.tel
                previewImages.value = i.data.data.imgs
                isal.value=i.data.data.isFlag
            }
        })
    }
    onBeforeMount(() => {
        getList()
    })
</script>

<style></style>